import React from "react";
import { Box, Grid, Typography, Avatar } from "@mui/material";
import RouteLink from "./RouteLink";
import { NexusGenObjects } from "../@types/nexus-typegen";
import Image from "next/image";
import PostOperateBar from "./PostOperateBar";

type Props = NexusGenObjects["Post"] & {
  author?: NexusGenObjects["User"];
};

export const PostCard = ({
  title,
  thumbnail,
  description,
  id,
  viewCount,
  isLiked,
  like,
  createdAt,
  author,
}: any) => {
  return (
    <Box
      sx={{
        p: 2,
        mb: {
          xs: 1,
          md: 2,
        },
        border: 1,
        display: "flex",
        borderRadius: 5,
        width: 1,
      }}
      component="section"
    >
      <Box
        sx={{
          flex: 1,
          height: 150,
          width: 1,
          display: "flex",
          flexDirection: "column",
        }}
      >
        <Box sx={{ display: "flex", pb: 1, w: 1, alignItems: "center" }}>
          <Avatar src={author.image} />
          <Typography
            sx={{
              px: 2,
            }}
            variant="h5"
            component="h3"
          >
            {author.name}
          </Typography>
        </Box>
        <Box sx={{ flex: 1, width: 1 }}>
          <RouteLink href={"/posts/" + id} title={title}>
            <Typography
              variant="h5"
              component="h2"
              sx={{
                whiteSpace: "nowrap",
                overflow: "hidden",
                textOverflow: "ellipsis",
              }}
            >
              {title}
            </Typography>
            <Typography
              variant="subtitle1"
              component="h3"
              sx={{
                display: "-webkit-box",
                overflow: "hidden",
                textOverflow: "ellipsis",
                WebkitBoxOrient: "vertical",
                WebkitLineClamp: {
                  md: 2,
                  xs: 1,
                },
              }}
            >
              {description}
            </Typography>
          </RouteLink>
        </Box>
        <PostOperateBar {...{ id, viewCount, isLiked, like, createdAt }} />
      </Box>
      <Box
        sx={{
          height: 150,
          display: {
            md: "block",
            xs: "none",
          },
        }}
      >
        {thumbnail && (
          <Image
            alt={description}
            width={150}
            height={150}
            src={thumbnail}
          ></Image>
        )}
      </Box>
    </Box>
  );
};

export default PostCard;
